<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color: rgb(115, 190, 255);
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <div :class="{active:activeIndex===0}" @click="activeIndex=0">密码登录</div>
            <div :class="{active:activeIndex===}" @click="activeIndex=1">短信登录</div>
        </div>
        <div>
                    <!-- 密码登录--- 输入框加按钮 -->
            <div v-show="activeIndex===0">
                <div>
                    <div>
                        <div>账号</div><input type="text" placeholder="请输入账号">
                        <div>密码</div><input type="text" placeholder="请输入密码">
                    </div>
                </div>
                <div>
                    <button>注册</button>
                    <button>登录</button>
                </div>
            </div>
            <!-- 短信登录--- 输入框加按钮 -->
            <div v-show="activeIndex===1">
                <div>
                    <div>
                        <div>+68</div><input type="text" placeholder="请输入手机号">
                        <div>验证码</div><input type="text" placeholder="请输入验证码">
                    </div>
                </div>
                <div>
                    <button>登录/注册</button>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="./vue.js"></script>
<script>
	const {createApp,ref} = Vue;
    createApp({
			setup() {
				let activeIndex=ref(0)

				return {
                    activeIndex
				}		
			}
		}).mount('#app')

</script>
</html>